import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { Button, List, Toast, WingBlank,Radio } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import Block from 'fs-flex'
import Header from '../../components/Header/index'
import Select from '../../components/Select/index'
import VerificationCode from '../../components/VerificationCode/index'
import PaihaoService from '../../services/paihaoService';
import Canstant from '../../utils/constant'
import style from './index.less'
const RadioItem = Radio.RadioItem;
class IndexPage extends React.Component {
  state = {
    sValue: '1',
    hasError: false,//电话号码是否有错误
    phoneNumber: '',//电话号码
    selectedBusi: null,//选中业务类型
    timer: null,//定时器ID
    verificationCodeVal: null,//验证码值
    currentBusinessArray: {
      batch: {//大批量
        numCount: 0, //有几个号等待
        busiCount: 0 //有几笔业务等待处理
      },
      scatter: {//零散业务
        numCount: 0,
        busiCount: 0 //有几笔业务等待处理
      }
    },//当前排队情况
    todoList: []//业务类型
  }

  async componentDidMount() {
    const { code, data } = await PaihaoService.queryBusinessType()
    if (code === Canstant.responseOK) {
      this.setState({ todoList: data })
    }
  }

  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info('Please enter 11 digits');
    }
  }
  todoSelcetChange = (value) => {
    this.setState({
      selectedBusi: value
    });
  }

  // goto 排号
  gotoPH = () => {
    const { dispatch } = this.props
    let url = '/ph';
    if (this.state.selectedBusi) {
      url += `?businessType=${this.state.selectedBusi}`
    }
    dispatch(routerRedux.push(url))
  }

  render() {
    const { todoList, currentBusinessArray: { batch, scatter },selectedBusi } = this.state
    const item = {
      bc: '#37caec',
      m: 10
    };
    return (
      <Block vf>
        <Block>
          <Header title='叫号预约' />
        </Block>
        <Block f='1' vf>
          <WingBlank>
            <Block m={20} fs={18} f={1} a='c' j='c'>预约业务类型选择</Block>
            <Block mt={15}>
              <List className={style.busiItemStyle}>
                {todoList && todoList.length > 0 ? todoList.map(item => (
                  <RadioItem style={{fontSize:'10px'}} key={item.id} checked={selectedBusi === item.id} onChange={() => this.todoSelcetChange(item.id)}>
                    {item.busitype}
                  </RadioItem>
                )) : <Block a='c' j='c'>暂无业务类型</Block>
                }
              </List>
            </Block>

            <Block wf mt={15}>
              <Block f='3'></Block>
              <Block f='4'><Button a='c' f='c' size='small' type="primary" onClick={this.gotoPH}>排号</Button></Block>
              <Block f='3'></Block>
            </Block>

          </WingBlank>
        </Block>
      </Block>
    );
  }

}

IndexPage.propTypes = {
};

export default createForm()(connect()(IndexPage));
